<template>
	<view class="home_container">
		<view class="home_box">
			<!-- <view class="tab_box">
				<view class="tab_all" v-for="(item, index) in tabList" :key="index"
					:class="isActive == index ? 'tab_all_active' : ''" @click="handlerTab(item, index)">
					<view class="tab_name">
						{{ item.name }}
					</view>
					<view class="tab_line"></view>
				</view>
			</view> -->
			<view class="coupon_box">
				<view class="all_btn_box">
					<!-- <view class="all_btn">
						<u-button type="error" @click="handlerReceiveAll(couponList)" size="mini"
							:disabled="showAllBtn">一键领取</u-button>
					</view> -->
				</view>
				<view class="coupon_all" v-for="(item, index) in couponList" :key="index"
					:class="[item.coupon_status == 2 || item.coupon_status == 3 ? 'coupon_all_active' : '']">
					<view class="top_tip">
						优惠券
					</view>

					<view class="left_box">
						<view class="coupon_img_box">
							<view class="">
								{{ item.coupon_name.charAt(0) }}
							</view>
							<!-- <image :src="item.img" mode="" class="coupon_img"></image> -->
						</view>
						<view class="coupon_title_box">
							<view class="coupon_title">
								{{ item.coupon_name }}
							</view>
							<view class="coupon_title_all">
								<view class="coupon_date">
									{{ item.begTime }}
								</view>
								<view class="coupon_for">
									至
								</view>
								<view class="coupon_invalid">
									{{ item.endTime }}
								</view>
								<view class="coupon_invalid">
									可领取
								</view>
							</view>
						</view>
					</view>

					<view class="right_box">
						<!-- v-if="item.isUsed == 0" -->
						<view class="right_all">
							<view class="coupon_price">
								<!-- 5 <span style="font-size: 28rpx; padding-left: 5rpx;">元</span> -->
							</view>
							<view class="coupon_receive" @click="handlerReceive(item)" v-if="item.coupon_status == 0">
								<!-- {{ item.isReceive == false ? '去领取' : '已领取' }} -->
								<view class="">
									去领取
								</view>
							</view>
							<!-- 已领取 -->
							<view class="coupon_receive_active" v-else-if="item.coupon_status == 1">
								<view class="">
									已领取
								</view>
							</view>
							<!-- 已使用 -->
							<view class="right_img_box" v-else-if="item.coupon_status == 2">
								<image src="/static/home/icon-used.png" mode="" class="right_img"></image>
							</view>
							<!-- 已过期 -->
							<view class="right_img_box" v-else-if="item.coupon_status == 3">
								<image src="/static/home/icon-expired.png" mode="" class="right_img"></image>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="commodity_no_box" v-if="isShowCommodityNo">
				<view class="commodity_no">
					———— 没有更多数据 ————
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import VConsole from 'vconsole';
	export default {
		data() {
			return {
				tabList: [{
						id: 0,
						name: '未使用'
					},
					{
						id: 1,
						name: '已使用'
					},
					{
						id: 2,
						name: '已过期'
					}
				],
				isActive: 0,
				couponList: [],
				countdownh: '',
				countdownm: '',
				countdowns: '',
				timer: null, //重复执行
				userId: '',
				pageNow: 1,
				pageSize: 5,
				total: null,
				isShowCommodityNo: false,
				stockId: '',
				userInfo: {},
				userId: '',
				showAllBtn: false
			}
		},
		onLoad(option) {
			// const vConsole = new VConsole();
			// if (this.getQueryString("user_id")) {
			// 	this.userId = this.getQueryString("user_id")
			// 	console.log('打印接收参数888888', this.userId)
			// }
			// this.selectCouponRecord()
			console.log(option.userId)
			this.userId = option.userId
			// this.getUrlParam()
			this.getFindUser()
		},
		// onReachBottom() {
		// 	if (this.total == this.couponList.length) {
		// 		uni.showToast({
		// 			title: '没有更多数据了',
		// 			icon: 'none'
		// 		})
		// 		this.isShowCommodityNo = true
		// 	} else {
		// 		this.isShowCommodityNo = false
		// 		this.pageNow++
		// 		this.getAppPackageFrontList()
		// 	}
		// },
		methods: {
			// 优惠券列表接口
			getWxCouponList() {
				// const userId = '222222'
				const userId = this.userInfo.user_id
				uni.request({
					url: 'https://qy.wechat.hengfengweiye.cn/api/getWxCouponList',
					method: 'GET',
					data: {
						user_id: userId
					},
					success: res => {
						console.log('优惠券列表接口成功', res)
						if (res.data.code == 1) {
							this.couponList = res.data.data
							this.couponList.forEach(item => {
								item.begTime = item.available_begin_time.split(' ')[0]
								item.endTime = item.available_end_time.split(' ')[0]
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							return
						}
					}
				})
			},

			// 领取卡包接口
			insertCouponRecord() {
				uni.showLoading({
					title: '正在领取...',
				})
				uni.request({
					url: 'https://qy.wechat.hengfengweiye.cn/api/insertCouponRecord',
					method: 'POST',
					data: {
						user_id: this.userInfo.user_id,
						wx_stock_id: this.stockId,
						open_id: this.userInfo.open_id,
						phone: this.userInfo.phone
					},
					success: res => {
						if (res.data.code == 1) {
							uni.hideLoading()
							uni.showToast({
								title: '领取成功',
								icon: 'none'
							})
							this.getWxCouponList()
						} else if (res.data.code == 2) {
							uni.hideLoading()
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							return
						} else {
							uni.hideLoading()
							uni.showToast({
								title: '领取异常',
								icon: 'none'
							})
							return
						}
					}
				})
			},

			// 查询用户信息接口
			getFindUser() {
				const phone = uni.getStorageSync('phone')
				uni.request({
					url: 'https://qy.wechat.hengfengweiye.cn/api/findUser',
					method: 'GET',
					data: {
						phone: phone
					},
					success: res => {
						console.log('成功了', res)
						if (res.data.code == 1) {
							this.userInfo = res.data.data.user
							uni.setStorageSync('userInfo', res.data.data.user)
							this.getWxCouponList()
							console.log('查询用户信息成功', this.userInfo)
						} else {
							uni.showToast({
								title: res.data.msg ? res.data.msg : '网络错误，请重试',
								icon: 'none'
							})
							return
						}
					}
				})
			},

			// 待定接口
			// selectCouponRecord() {
			// 	const that = this
			// 	// let userId = this.userId
			// 	let userId = '23101913593341546530c5c5c67ca'
			// 	this.$http.sendRequest('selectCouponRecord?user_id=' + userId, 'GET', ).then(res => {
			// 		if (res.data.code == 1) {
			// 			this.couponList = res.data.data
			// 			this.couponList.forEach(item => {
			// 				item.begTime = item.available_begin_time.split(' ')[0]
			// 				item.endTime = item.available_end_time.split(' ')[0]
			// 			})

			// 		} else {
			// 			uni.showToast({
			// 				title: res.data.msg,
			// 				icon: 'none'
			// 			})
			// 			return
			// 		}
			// 	})
			// },.

			// 获取url参数
			getUrlParam() {
				this.userId = this.getQueryString("userId")
				console.log('打印接收参数666666', this.userId)
			},

			// 用正则获取url参数
			getQueryString(name) {
				let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				let url = window.location.href.split("?")[1].match(reg);
				// console.log(url)
				if (url != null) {
					return decodeURI(url[2]); //decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
				} else {
					return null;
				}
			},

			// 切换tab
			// handlerTab(item, index) {
			// 	this.isActive = index
			// },

			// 一键领取
			// handlerReceiveAll(val) {
			// 	uni.showModal({
			// 		title: '是否确定一键领取？',
			// 		success: res => {
			// 			const that = this
			// 			let stockIdArr = []
			// 			let stockIds = ''
			// 			let status = ''
			// 			val.forEach(item => {
			// 				if (item.coupon_status == 0) {
			// 					stockIdArr.push(item.stock_id)
			// 				}
			// 			})
			// 			stockIds = stockIdArr.join(',')
			// 			console.log('打印查看2', stockIds)
			// 			that.stockId = stockIds
			// 			that.insertCouponRecord()
			// 		},
			// 		fail: err => {
			// 			console.log('不作操作')
			// 		}
			// 	})

			// },

			// 领取
			handlerReceive(val) {
				this.stockId = val.stock_id
				this.insertCouponRecord()
			},


		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f1f0f0;
	}

	.home_container {
		padding: 14rpx 20rpx 27rpx;

		.home_box {

			.tab_box {
				display: flex;
				justify-content: space-between;
				background: #FFFFFF;
				border: 1px solid #F6F6F6;
				box-shadow: 0px 12rpx 40rpx 17rpx rgba(172, 168, 168, 0.06);
				border-radius: 12rpx 12rpx 0 0;
				padding: 35rpx 73rpx 0;

				.tab_all {

					.tab_name {
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}

					.tab_line {
						width: 24rpx;
						height: 6rpx;
						background: transparent;
						border-radius: 3rpx;
					}
				}

				.tab_all_active {
					display: flex;
					flex-direction: column;
					align-items: center;

					.tab_name {
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #FF4B4B;
						padding-bottom: 21rpx;
					}

					.tab_line {
						width: 24rpx;
						height: 6rpx;
						background: #FF4B4B;
						border-radius: 3rpx;
					}
				}
			}

			.coupon_box {
				background: #FFFFFF;
				border: 1px solid #F6F6F6;
				box-shadow: 0px 12rpx 40rpx 17rpx rgba(172, 168, 168, 0.06);
				border-radius: 0 0 12rpx 12rpx;
				padding: 36rpx 40rpx;

				.all_btn_box {
					display: flex;
					justify-content: flex-end;
					margin-bottom: 30rpx;
				}

				.coupon_all {
					position: relative;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					border: 1px solid #EC3434;
					border-radius: 10rpx;
					padding: 60rpx 22rpx 24rpx 15rpx;
					margin-bottom: 24rpx;

					.top_tip {
						position: absolute;
						top: 0;
						left: 0;
						width: 100rpx;
						height: 40rpx;
						background: #FFE9E9;
						border-radius: 10rpx 0px 10rpx 0px;
						font-size: 18rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #EC3434;
						text-align: center;
						line-height: 40rpx;
					}

					.left_box {
						display: flex;

						.coupon_img_box {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							width: 70rpx;
							height: 70rpx;
							border-radius: 50%;
							background: #DEEBFF;
							color: #4F96FF;
							text-align: center;
						}

						.coupon_title_box {
							padding-left: 20rpx;

							.coupon_title {
								font-size: 30rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #333333;
								padding-bottom: 10rpx;
							}

							.coupon_title_all {
								display: flex;
								align-items: baseline;

								.coupon_date {
									font-size: 24rpx;
									font-family: my-font;
									font-weight: bold;
									color: #999999;
									padding-right: 6rpx;
								}

								.coupon_for {
									font-size: 22rpx;
									font-family: my-font;
									font-weight: 400;
									color: #999999;
								}

								.coupon_invalid {
									display: flex;
									align-items: baseline;
									font-size: 22rpx;
									font-family: my-font;
									font-weight: bold;
									color: #999999;
									padding-left: 6rpx;
								}
							}
						}
					}

					.right_box {

						.right_all {
							display: flex;
							flex-direction: column;
							align-items: center;

							.coupon_price {
								font-size: 46rpx;
								font-family: my-font;
								font-weight: bold;
								color: #EC3434;
								padding-bottom: 20rpx;
							}

							.coupon_receive {
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
								width: 122rpx;
								height: 45rpx;
								background: #EC3434;
								border-radius: 23rpx;
								font-size: 22rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #FFFFFF;
								text-align: center;
							}

							.coupon_receive_active {
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
								width: 122rpx;
								height: 45rpx;
								background: #FF7112;
								border-radius: 23rpx;
								font-size: 22rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #FFFFFF;
								text-align: center;
							}

							.right_img_box {
								width: 112rpx;
								height: 98rpx;

								.right_img {
									width: 100%;
									height: 100%;
								}
							}
						}

					}
				}





				.coupon_all_active {
					position: relative;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					border: 1px solid #E6E6E6;
					border-radius: 10rpx;
					padding: 30rpx 22rpx 24rpx 15rpx;
					margin-bottom: 24rpx;

					.top_tip {
						position: absolute;
						top: 0;
						left: 0;
						width: 100rpx;
						height: 40rpx;
						background: #F5F5F5;
						border-radius: 10rpx 0px 10rpx 0px;
						font-size: 18rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #B3B3B3;
						text-align: center;
						line-height: 40rpx;
					}

					.left_box {
						display: flex;

						.coupon_img_box {
							width: 70rpx;
							height: 70rpx;
							border-radius: 50%;
							background: #DEEBFF;
							color: #4F96FF;
							text-align: center;
							line-height: 70rpx;
						}

						.coupon_title_box {
							padding-left: 20rpx;

							.coupon_title {
								font-size: 30rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #B3B3B3;
								padding-bottom: 10rpx;
							}

							.coupon_title_all {
								display: flex;
								align-items: baseline;

								.coupon_date {
									font-size: 24rpx;
									font-family: my-font;
									font-weight: bold;
									color: #CCCCCC;
									padding-right: 14rpx;
								}

								.coupon_for {
									font-size: 22rpx;
									font-family: my-font;
									font-weight: 400;
									color: #999999;
								}

								.coupon_invalid {
									display: flex;
									align-items: baseline;
									font-size: 22rpx;
									font-family: my-font;
									font-weight: 400;
									color: #CCCCCC;
									padding-left: 14rpx;
								}
							}
						}
					}

					.right_box {

						.right_all {
							display: flex;
							flex-direction: column;
							align-items: center;

							.coupon_price {
								font-size: 46rpx;
								font-family: my-font;
								font-weight: bold;
								color: #EC3434;
								padding-bottom: 20rpx;
							}

							.coupon_receive {
								width: 122rpx;
								height: 45rpx;
								background: #EC3434;
								border-radius: 23rpx;
								font-size: 22rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #FFFFFF;
								text-align: center;
								line-height: 45rpx;
							}

							.coupon_receive_active {
								width: 122rpx;
								height: 45rpx;
								background: #FF7112;
								border-radius: 23rpx;
								font-size: 22rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #FFFFFF;
								text-align: center;
								line-height: 45rpx;
							}

							.right_img_box {
								width: 112rpx;
								height: 98rpx;

								.right_img {
									width: 100%;
									height: 100%;
								}
							}
						}

					}
				}
			}

			.commodity_no_box {
				display: flex;
				justify-content: center;
				padding-top: 40rpx;

				.commodity_no {
					color: #ccc;
					font-size: 28rpx;
				}
			}
		}
	}
</style>